import { STAT_COLORS } from '@/constant';
import type { questionComponentType } from '@/utils/type';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';


type propsType = {
  component: questionComponentType,
  list:any[]
}

const computeData = (component: questionComponentType, list: any[]) => {
  const names = component.props?.options?.map(item => {
    return {
      name: item.label,
      number: 0
    }
  })
 list?.forEach((item: any) => {
    //根据key找value
    if (item[component.fe_id]) {
      const tmp = item[component.fe_id].split(',')
      tmp?.forEach((item: any) => {
        names?.forEach(i => {
          if (i.name === item) i['number']++
        })
      })
    }
  })

  return names
}


const Example = (props: propsType) => {
  const { component,list } = props
  const datas = computeData(component, list) 


  return (
    <ResponsiveContainer width="100%" height="70%">
      <BarChart
        width={500}
        height={300}
        data={datas}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />

        <Bar dataKey="number" fill="#82ca9d"  >
          {datas?.map((i, index) => (
            <Cell key={`cell-${i.name}`} fill={STAT_COLORS[index+4]} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
};

export default Example;
